<template>
  <div class="staticsticsLiNav">
    <!-- nav切换 -->
    <div class="nav-box">
      <div class="nav-btn" @click="navClick(index)" :class="activeName == index?'nav-btn-boxShow':null" v-for="(item, index) in strongList" :key="index">
        <div class="navIcon">
          <img :src="item.strongList[0].icon" alt="navIcon">
        </div>
        <!-- 标题 -->
        <div class="navName">{{ item.strongList[0].label }}</div>
        <!-- 数量 -->
        <span class="navNum">{{ item.strongList[0].value }}{{ item.strongList[0].unit }}</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="weekList-warp" @click="goSJKB">
      <div
        class="weekList-warp__group"
        v-for="(group, index) in showNowWeekList"
        :key="index"
      >
        <div class="weekList-box" v-for="(weekListItem, i) in group" :key="i">
          <div class="leftTitle">{{ weekListItem.label }}</div>
          <div class="rightTitle"><span class="rightTitle_num">{{ weekListItem.value }}</span>{{ weekListItem.unit }}</div>
          <!-- <div v-if="weekListItem.rate" class="leftTitle">{{ '完成比例' }}</div>
          <div v-if="weekListItem.rate" class="rightTitle"><span class="rightTitle_num">{{ weekListItem.rate }}</span>%</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vueData;
export default {
  name: 'statisticsLi',
  props: {
    strongList: {
      type: Array,
    },
    weekList: {
      type: Array,
    },
  },
  beforeCreate() {
    vueData = this
  },
  watch: {
    strongList: {
      deep: true,
      handler(val) {
        this.activeName = 0,
        this.nowWeekList = val[0].weekList
      }
    }
  },
  data() {
    return {
      activeName: 0,
      nowWeekList: this.strongList[0].weekList
    }
  },
  computed: {
    showNowWeekList () {
      return this.nowWeekList.map(v => {
        if (!Array.isArray(v)) {
          return [v]
        } else {
          return v
        }
      })
    }
  },
  methods: {
    handleClick () {
      this.$emit('click')
    },
    navClick(index) {
      this.activeName = index
      this.nowWeekList = this.strongList[index].weekList
    },
    goSJKB() {
      this.$emit('sjkb-click')
    }
  },
}
</script>

<style lang="scss" scoped>
.staticsticsLiNav{
  width: 100%;
  .el-tabs {
    background: transparent;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15),
                0px 0px 0px 0px rgba(0, 0, 0, 0.15),
                0px 0px 0px 0px rgba(0, 0, 0, 0.15),
                0px 0px 0px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 6px 6px;
    border: 0;
    .el-tabs__nav {
      width: 100%;
    }
    .el-tabs__nav-scroll,.el-tabs__header {
      border: 0;
      background: transparent;
    }
    .el-tabs__header {
      background: transparent;
    }
    .el-tabs__item {
      background: transparent;
      border: 0;
      padding: 0 !important;
      width: 108px;
      height: 42px;
      border-radius: 8px 12px 0 0;
    box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.15),
                0px 0px 0px 0px rgba(0, 0, 0, 0.15),
                2px -2px 3px 0px rgba(0, 0, 0, 0.15),
                0px 0px 0px 0px rgba(0, 0, 0, 0.15);
      margin-right: 8px;
    }
  }
  .nav-box {
    display: flex;
  }
  .nav-btn {
    width: 108px;
    height: 42px;
    padding-left: 22.5px;
    border-radius: 6px 12px 0 0;
    position: relative;
    margin-right: 12px;
    position: relative;
    background: rgba(111, 186, 254, .2);
    &-boxShow {

      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
      background: #fff;
      &::after {
        content: '';
        width: calc(100% + 4px);
        height: 6px;
        background: #fff;
        position: absolute;
        bottom: -6px;
        left: 0px;
        z-index: 6;
      }
    }
    .navIcon {
      width: 10px;
      height: 10px;
      position: absolute;
      top: 5px;
      right: 5px;
      img {
        vertical-align: baseline;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .navName {
      color: #2881E2;
      font-size: 13px;
      font-weight: 500;
    }
    .navNum {
      // width: auto;
      display: inline-block;
      padding: 0 2px;
      height: 15px;
      background: #6FBAFE;
      border-radius: 2px;
      font-size: 12px;
      line-height: 15px;
      position: absolute;
      margin-top: 4px;
      color: #fff;
    }
  }
  .weekList-warp {
    width: 100%;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    padding: 0 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    .weekList-warp__group{
      padding: 8px 0;
      border-bottom: 1px solid #EEF0F2;
      &:last-child{
        border-bottom: 0;
      }
    }
    .weekList-box {
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 24px;
      line-height: 24px;
      box-sizing: content-box;
      font-size: 13px;
      .leftTitle {
        color: #999;
        font-weight: 600;
      }
      .rightTitle {
        color: #505050;
        &_num {
          font-size: 15px;
          font-weight: 600;
          margin-right: 1px;
        }
      }
    }
    .clearBorder {
      border-bottom: 0;
    }
  }
}
</style>
